<template>
	<view class="bg">
		<view class="title">
			<image src="https://i.ringzle.com/file/20231122/89417934f3bb4281b0be25b825307fb4.png" mode="aspectFit">
			</image>
			<view class="subtitle">
				一分钟搞定你的攻略
			</view>
		</view>
		<view class="category">
			<view class="left" @click="goToPreferChoose()">
				<span class="leadWord">创建旅游行程 ></span>
				<span>去创建</span>
			</view>
			<view class="right">
				<view class="top" @click="goToRec()">
					<span class="leadWord">智能推荐行程 ></span>
				</view>
				<view class="bottom">
					<span class="leadWord" @click="Introduction()">旅游攻略 ></span>
				</view>

			</view>
		</view>
		<view class="btn" @click="goToMy()">
			<image src="https://i.ringzle.com/file/20231123/0c23295f9e9b402baa3552a8031a4f54.png" mode="aspectFill">
			</image>
			<span>我的行程</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
			}
		},
		methods: {
			goToRec() {
				uni.navigateTo({
					url: '/pagesTrip/custom-travel/recommendedItinerary'
				})
			},
			goToPreferChoose() {
				uni.navigateTo({
					url: '/pagesTrip/custom-travel/preferChoose'
				})
			},
			goToMy() {
				uni.navigateTo({
					url: '/pagesTrip/custom-travel/index'
				})
			},
			Introduction() {
				uni.navigateTo({
					url: '/pages/shengsi/strategy/strategy'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		width: 750rpx;
		height: 100vh;
		background: url('https://i.ringzle.com/file/20231122/25fde9d85b264e1f92cfdd53e269a962.png') no-repeat fixed center;
		position: relative;

		.leadWord {
			font-size: 34rpx;
			color: #111111;
			font-weight: 700;
		}

		.title {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 277rpx;

			image {
				width: 393.3rpx;
				height: 92.2rpx;
			}

			.subtitle {
				width: 393.3rpx;
				text-align-last: justify;
				font-size: 36rpx;
				font-weight: 300;
				color: #FFFFFF;
			}
		}

		.category {
			width: 750rpx;
			display: flex;
			justify-content: center;
			margin-top: 241rpx;

			.left {
				background: url('https://i.ringzle.com/file/20231122/530b7c39f28440e1bca5c7a9fe3fb0dc.png') no-repeat center;
				width: 378rpx;
				height: 440rpx;
				background-size: 114% 114%;
				padding: 32rpx 53rpx;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;

				span:nth-child(2) {
					width: 146rpx;
					height: 60rpx;
					background: rgba(0, 175, 239, 0);
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					opacity: 1;
					border: 1rpx solid #00AFEF;
					line-height: 60rpx;
					text-align: center;
					color: #00AFEF;
					margin-top: 30rpx;

				}
			}

			.right {

				// width: 345rpx;
				// height: 440rpx;
				.top {
					box-sizing: border-box;
					padding: 19rpx 29rpx;

					width: 325rpx;
					height: 209rpx;
					background: url('https://i.ringzle.com/file/20231122/12b1ef3816c343c48eda3f25538933c6.png') no-repeat center;
					background-size: 124% 132%;
				}

				.bottom {
					box-sizing: border-box;
					padding: 19rpx 29rpx;

					background: url('https://i.ringzle.com/file/20231122/0cdf2514c28e4f13b5501d258f712353.png') no-repeat center;
					width: 325rpx;
					height: 209rpx;
					background-size: 124% 133%;
					margin-top: 17rpx;
				}
			}
		}

		.btn {
			position: absolute;
			width: 396rpx;
			height: 90rpx;
			background: #2A9BFE;
			box-shadow: 0rpx 3rpx 10rpx 1rpx #2A9BFE;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #FFFFFF;
			bottom: 77px;
			left: 178rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}

	}
</style>